<template>
  <div style="width: 100%">
    <el-table
      class="Fg-table-data"
      :loading="loading"
      :data="data"
      v-bind="$attrs"
      style="width: 100%"
      :header-cell-style="{background:$attrs.color}"
    >
      <el-table-column v-if="index" type="index" width="50" align="center"></el-table-column>
      <template v-for="(item, key) in dataObj.head">
        <el-table-column v-if="!item.hide" v-bind="item" :key="key">
          <template slot-scope="scope">
            <el-tag
              v-if="item.render=='tag'"
              type="primary"
              :size="$attrs.size"
            >{{scope.row[item.prop]}}</el-tag>
            <el-image
              v-else-if="item.render=='img'"
              style="width: 50px; height: 50px"
              :src="scope.row[item.prop]"
              fit="fill"
            ></el-image>
            <el-button
              v-else-if="item.render=='button'"
              type="text"
              :size="$attrs.size"
            >{{scope.row[item.prop]}}</el-button>
            <span v-else>{{scope.row[item.prop]}}</span>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <div v-if="isPage" :style="{textAlign:pagination.position,marginTop:'15px'}">
      <el-pagination
        v-bind="pagination"
        :layout="layout"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-size="size"
      ></el-pagination>
    </div>
  </div>
</template>


<script>
import { comMixin } from "../../../utils/comMixins";
export default {
  name: "form-table",
  mixins: [comMixin],
  props: {
    // 分页配置
    pagination: {
      type: Object,
      default: () => {},
    },
    // 是否分页
    isPage: {
      type: Boolean,
      default: false,
    },
    // 是否显示序号
    index: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      total: 0,
      data: [],
      current: 1,
      size: 10,
    };
  },
  computed: {
    layout() {
      return this.pagination.layout.join(",");
    },
  },
  watch: {
    // dataObj() {
    //   if (this.$attrs.isEdit && this.dataType == "dynamic") {
    //     this.handleCurrentChange(1);
    //   }
    // },
  },
  methods: {
    // 请求数据
    // loadData() {},
    handleSuccess(data) {
      // 分页的情况
      this.data = data[this.props.records || "records"];
      this.total = data[this.props.total || "total"];
      this.current =
        parseInt(data[this.props.current || "current"]) || this.current;
      this.size = parseInt(data[this.props.size || "size"]) || this.size;
    },
    handleError(err) {
      this.data = [];
    },
    handleSizeChange(val) {
      this.current = 1;
      this.size = val;
      const queryForm = {};
      queryForm[this.props.current] = this.current;
      queryForm[this.props.size] = this.size;
      this.loadData(queryForm);
    },
    handleCurrentChange(val) {
      this.current = val;
      const queryForm = {};
      queryForm[this.props.current] = this.current;
      queryForm[this.props.size] = this.size;
      this.loadData(queryForm);
    },
  },
};
</script>

<style lang="scss" >
.Fg-table-data {
  table {
    width: 100% !important;
  }
}
</style>